<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
      <search-panel
        v-slot="{ form }"
        :addPer="authConfig.add"
        :selectPer="authConfig.query"
        :financePer="authConfig.status"
        addTitle="新增项目"
        financeTitle="项目工时设置"
        @insert="add"
        @search="search"
        @handleDataExport="handleDataExport"
        @finance="handleDataInsert('工时设置')"
        :showSearchButton="true"
        :showAddButton="true"
        :showFinanceButton="true"
      >
        <job-shop
          v-model="form.storeId"
          placeholder="所属门店"
        />
        <el-input
          v-model="form.projectName"
          clearable
          placeholder="请输入项目名称"
          style="width: 200px"
        />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="80"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit"
            title="编辑"
            style="cursor: pointer"
            v-permission="authConfig.edit"
            @click="handleDataUpdateEdit(row)"
          ></i>
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"
            v-permission="authConfig.del"
            @click="handleDataDelete(row)"
          ></i>
        </template>
      </data-table>
    </template>
    <template #dialog>
      <dialog-data-form
        @operate="handleDataOperate"
        @close="close"
      />
    </template>
  </base-layout>
</template>
<script>
import {
  dataList,
  dicts,
  details,
  addData,
  updateData,
  deleteData,
  statusData,
} from "@/api/after-sale/systemManage/project";
import baseMixin from "@/mixins/base";
import DialogDataForm from "./components/DialogDataForm.vue";
export default {
  components: { DialogDataForm },
  mixins: [
    baseMixin({
      findData: dataList,
      addData: addData,
      deleteData: deleteData,
      dataName: ["content", "totalRecords"],
      isAdd: false,
      findDataById: details,
      updateData: updateData,
      idName: "id",
      format (res) {
        return res.map((data) => {
          data.stateText = data.status ? "启用" : "停用";
          return data;
        });
      },
    }),
  ],
  data () {
    return {
      authConfig: {
        query: 'catProject:page',
        add: 'catProject:create',
        edit: 'catProject:update',
        del: 'catProject:delete',
        status: 'catProject:status'
      },
      dialogWidth: "800px",
      tableColumnAttributes: [
        { name: "项目所属门店", value: "storeName", type: "text", },
        { name: "项目名", value: "projectName", type: "text", },
        { name: "项目介绍", value: "remark", type: "text", },
        { name: "项目工时", value: "workHours", type: "text", },
        { name: "项目类型", value: "projectDictValue", type: "text", },
        // { name: "项目所需配件", value: "partsNames", type: "text", width: "200" },
        { name: "工时费", value: "amount", type: "text", },
        { name: "项目提成点", value: "commission", type: "text", },
        { name: "创建时间", value: "createTime", type: "text", },
        {
          name: "项目状态",
          valueId: "status",
          value: "stateText",
          type: "switch",
          width: "200",
          action: (row) => {
            this.updateState(row.id);
          },
        },
      ],
      dict: [
        { id: "1", value: "测试门店1" },
        { id: "2", value: "测试门店2" },
      ],
      types: [
        { id: "1", value: "测试收支种类1" },
        { id: "2", value: "测试收支种类2" },
      ],
    };
  },
  methods: {
    search (form) {
      this.searchOptions = {
        projectName: form.projectName,
        storeId: form.storeId,
      };
      this.currentPage = 1;
      this.setTableData();
    },
    async updateState (id) {
      const { data, success } = await statusData(id);
      if (success) {
        this.search();
      } else {
      }
    },
    // 保存成功关闭
    close () {
      this.dialogClose();
    },
    add () {
      this.$router.push({ path: "/systemManage/addProject" });
    },
    handleDataUpdateEdit (row) {
      this.$router.push({ path: "/systemManage/editProject", query: { id: row.id } });
    },
  },
};
</script>
